<template>
  <view class="container">
    <!-- 商品信息 -->
    <view class="order-item">
      <!-- 购物车列表 -->
      <view class="cart-list" v-if="cartList.length > 0">
        <!-- 按商家分组 -->
        <view v-for="(shop, shopIndex) in cartList" :key="shopIndex" class="cart-list-group" v-if="shop.check">
          <!-- 商家信息 -->
          <view class="cart-list-title">
            <view class="cart-list-title-title">
              <i class="iconfont icon-ds-shop" />&nbsp; {{ shop.goodsTypeName }}
            </view>
          </view>
          <view class="" v-for="(item, itemIndex) in shop.goods" :key="itemIndex" v-if="item.check">
            <view class="cart-item" v-if="groupIndex == 0"
              v-for="(group, groupIndex) in item.selectedSpecificationGroups" :key="groupIndex">
              <!-- 商品图片 -->
              <!-- <image :src="host + item.icon" mode="aspectFill" class="product-image"></image> -->
              <!-- 商品信息 -->
              <view class="product-info">
                <text class="product-title">{{ item.name }}</text>
                <scroll-view class="product-div" scroll-x="true">
                  <view class="product-div-tag" v-for="tagsItem, index in item.tags" :key="index">
                    {{ tagsItem }}
                  </view>
                </scroll-view>
              </view>
            </view>
            <!-- 规格列表 -->
            <view class="shop-item" v-for="(group, groupIndex) in item.selectedSpecificationGroups" :key="groupIndex">
              <view class="shop-item-l">
                <view class="shop-item-l-text" v-for="item, index in group.specificationItemGroup" :key="index">
                  {{ group.specificationCondition }}*{{ item.name }}-{{ item.itemName }}
                </view>
                <view class="shop-item-l-price">
                  <view class="shop-item-l-price-price">
                    <text class="price-icon">￥</text>
                    <text class="plan-price-text">{{ group.currentUnitPrice }}</text>
                  </view>
                </view>
              </view>
              <view class="shop-item-r">
                x{{ group.amount }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 出行人信息，支持多选 -->
      <view class="people ">
        <view class="people-name">
          <view class="people-name-title">
            选择联系人
          </view>
          <!-- 右箭头图标 -->
          <view class="people-name-desc" @click="goContact">
            选择/新增
            <image src="@/static/img/godtail.png" mode="widthFix" class="arrow-icon"></image>
          </view>
        </view>
        <scroll-view scroll-x="true" class="scroll-container" v-if="contactArr.length > 0">
          <view class="product-list">
            <view v-for="(item, index) in contactArr" :key="index"
              :class="['product-item', item.check ? 'product-item-active' : '']" @click="checkFun(index, item)">
              <text class="product-name">{{ item.realname }}</text>
            </view>
          </view>
        </scroll-view>
        <view v-for="(item, index) in contactSelectArr" :key="index">
          <view class="addresssli">
            <view class="addresssli-jian">
              <!-- <image class="addresssli-jian-img" src="@/static/img/jian.png" mode="widthFix"></image> -->
              <view class="checkbox">
                <!-- <view v-if="index==0" class="checkbox-icon">✔</view> -->
                {{ index + 1 }}
              </view>
              {{ index == 0 ? '主行人' : '随行人' }}
            </view>
            <view class="addressslicon">
              <view class="addressslicon-title">
                {{ item.realname }}
              </view>
              <view class="addressslicon-desc">
                手机号：{{ item.telephone }}
              </view>
              <view class="addressslicon-desc">
                证件ID：{{ item.IDNumber }}
              </view>
            </view>
          </view>
        </view>
        <view class="people-desc">
          默认主行人是所有服务优先级首位，其余随行人按勾选顺序依次绑定服务，请仔细核对绑定顺序，确保服务对应准确。
        </view>
      </view>
      <!-- 保险服务 -->

      <view class="Travel">
        <view class="Travel-name">
          <view class="Travel-name-title">
            出行保障
          </view>
          <!-- 右箭头图标 -->
          <view class="Travel-name-desc" @click="goContact">
            在外旅行，有保险更安心
            <!-- <image src="@/static/img/godtail.png" mode="widthFix" class="arrow-icon"></image> -->
          </view>
        </view>
        <scroll-view scroll-x="true" class="Travel-container" v-if="TravelArr.length > 0">
          <view class="Travel-list">
            <view v-for="(item, index) in TravelArr" :key="index"
              :class="['Travel-item', TravelIndex == index ? 'Travel-item-active' : '']">
              <view class="">
                <image v-if="index == 0" class="Travel-item-img" src="@/static/img/t1.png"></image>
                <image v-else class="Travel-item-img" src="@/static/img/t2.png"></image>
              </view>
              <view class="Travel-item-name">{{ item.name }}</view>
              <view class="Travel-item-desc">￥{{ item.unitPrice }}人</view>
              <view class="Travel-item-desc1">
                <!-- <view class="" v-if="index==0">
									<i class="iconfont icon-searchclose" style="color: red;" />
								</view> -->
                <view class="">
                  <view class="Travel-item-desc1-desc" v-for="(row, idx) in item.items" :key="idx">
                    <text v-if="row.value != 'x'">{{ row.key }}</text> <text
                      :class="['Travel-item-desc1-desc-text', { 'Travel-item-desc1-desc-text-red': row.value == 'x' }]">{{
                        row.value }}</text>
                  </view>
                </view>
              </view>
              <view class="">
                <radio :checked="TravelIndex == index" @click="checkFun1(index, item)" />
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="Travel-box">

        </view>
      </view>
      <!-- 订单信息 -->
      <view class="card">
        <view class="card-box" @click="manClick">
          <view class="card-box-l">
            留言
          </view>
          <view class="card-box-r">
            {{ paramObj.description ? paramObj.description : '建议留言前先与商家沟通确认' }}
            <image src="@/static/img/godtail.png" mode="widthFix" class="arrow-icon"></image>
          </view>
        </view>
        <!-- <view class="card-box">
					<view class="card-box-l">
						创建时间
					</view>
					<view class="card-box-r">
						{{$publicFun.GetTime(pageObj.createTime)}}
					</view>
				</view>
				<view class="card-box">
					<view class="card-box-l">
						支付方式
					</view>
					<view class="card-box-r">
						微信支付
					</view>
				</view> -->
      </view>
      <view class="user-notice">
        <view class="checkbox" @click="check = !check">
          <view v-if="check" class="checkbox-icon">✔</view>
        </view>
        <view class="user-notices">
          <text class="user-notice-text"
            @click="goPage('/page_wallet/paynotice?itemKey=' + 'booking_instruction')">预订须知</text>
          <text>以及</text>
          <text class="user-notice-text"
            @click="goPage('/page_wallet/paynotice?itemKey=' + 'contract_terms')">合同条款</text>
          <text>，高龄人群/孕妇</text>
          <text class="user-notice-text"
            @click="goPage('/page_wallet/paynotice?itemKey=' + 'travel_declaration')">出行声明</text>，
          <text class="user-notice-text"
            @click="goPage('/page_wallet/paynotice?itemKey=' + 'personal_information_authorization_statement')">个人信息授权声明</text>

        </view>

      </view>
      <!-- 操作按钮 -->
      <view class="footer">
        <view class="footer-btn">
          <!-- <button class="btn secondary  " >查看详情</button> -->
          <!-- <button class="btn secondary">联系客服</button> -->
          <view class="btn primary btn-class" @click="submit">
            立即支付 ￥{{ totalPrice }}
          </view>
        </view>
      </view>
    </view>
    <info ref="info" v-model="paramObj" @addText="addText" />
  </view>
</template>

<script>
import info from './component/info.vue'
import uniPicker from '@/components/uni_picker/uni_picker.vue'
import uniCountdown from '@/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue'
import {
  mapGetters
} from 'vuex'
export default {
  name: 'payWait',
  components: {
    uniCountdown,
    uniPicker,
    info,
  },
  data() {
    return {
      imgUrl: this.$apiFun.imgUrl,
      host: this.$apiFun.host,
      pageObj: {},
      cartList: [],
      id: '',
      contactArr: [],
      contactSelectArr: [],
      contactSelectArrIndex: 0,
      paramObj: {
        realname: '',
        description: '',
      },
      check: false,
      TravelIndex: 0,
      TravelArr: [],
      unitPrice: 0,
    }
  },
  watch: {},
  computed: {
    //login_status 0 未登录 、1临时微信登录 2已登录
    ...mapGetters(['login_status']),
    totalPrice() {
      // Decimal: 加 add, 减 sub, 乘 mul, 除 div, 求余 modulo
      const Decimal = this.$Decimal
      let price = new Decimal(0)
      let num = new Decimal(0)
      let selectLg = new Decimal(0)
      let unitPrice = new Decimal(0)
      let unitPriceAll = new Decimal(0)
      num = this.cartList.reduce((total, shop) => {
        let num1 = shop.goods
          .map((row) =>
            row.selectedSpecificationGroups
              .filter((item) => item.check)
              .reduce((shopTotal, item) => {
                var shopTotal = new Decimal(shopTotal)
                let currentUnitPrice = new Decimal(item.currentUnitPrice)
                let amount = new Decimal(item.amount)
                let num1 = currentUnitPrice.mul(amount).toNumber()
                num1 = new Decimal(num1)
                return shopTotal.add(num1).toNumber()
              }, 0)
          )
          .reduce((shopTotal, item) => {
            return shopTotal + item
          })
        num1 = new Decimal(num1)
        num = num.add(num1).toNumber()
        num = new Decimal(num)
        return num
      }, 0)
      // 计算保险
      selectLg = new Decimal(this.contactSelectArr.length)
      unitPrice = new Decimal(this.unitPrice)
      unitPriceAll = selectLg.mul(unitPrice).toNumber()
      unitPriceAll = new Decimal(unitPriceAll)
      num = new Decimal(num)
      num = num.add(unitPriceAll).toNumber()
      console.log('num----------', num)
      return num
    },
  },
  onLoad(option) {
    if (option.data) {
      let cartList = JSON.parse(decodeURIComponent(option.data))
      console.log('cartList---------', cartList)
      cartList.forEach((item) => {
        item.check = false
        item.goods.map((goodsItem) => {
          if (goodsItem.check) {
            item.check = true
          }
        })
      })
      this.cartList = cartList
    }
    this.Travel()
  },
  onShow() {
    this.userDetail()
  },
  methods: {
    async init() {
      let data = await this.$apiFun.getApi(this.$api.orderDetailApi, {
        payOrderId: this.id,
      })
      this.pageObj = data
    },
    // 出行保险字典
    async Travel() {
      let data = await this.$apiFun.getApi(this.$api.configInfoApi, {
        itemKey: 'travel_insurance_specifications',
      })
      if (JSON.parse(data.value).length > 0) {
        this.TravelArr = JSON.parse(data.value)
        this.TravelArr.forEach((item) => {
          item.unitPrice = item.unitPrice / 100
        })
        this.unitPrice = this.TravelArr[0].unitPrice
      }
    },
    //初始化方法
    async userDetail() {
      var that = this
      var data = {}
      const {
        contactsList
      } = await this.$apiFun.getApi(
        this.$api.userDetailApi,
        data
      )

      let contactArr = contactsList.map((item, index) => {
        return {
          ...item,
          check: index == 0 ? true : false,
        }
      })
      this.contactArr = contactArr
      // 默认配置初始化 联系人
      if (
        contactArr &&
        contactArr.length > 0 &&
        this.contactSelectArr.length == 0
      ) {
        this.contactSelectArr.push(contactArr[0])
      }
      // 初始化回显出行人选择状态
      if (this.contactSelectArr.length > 0) {
        this.contactArr.forEach((row) => {
          row.check = false
          this.contactSelectArr.map((item) => {
            if (item.realname == row.realname) {
              row.check = true
            }
          })
        })
      }
    },
    // 设置观影人
    goContact() {
      uni.navigateTo({
        url: '/page_wallet/peopleList',
      })
    },
    // totalPrice() {
    // 	// Decimal: 加 add, 减 sub, 乘 mul, 除 div, 求余 modulo
    // 	const Decimal = this.$Decimal
    // 	let price = new Decimal(0)
    // 	let num = new Decimal(0)
    // 	let selectLg = new Decimal(0)
    // 	let unitPrice = new Decimal(0)
    // 	let unitPriceAll = new Decimal(0)
    // 	num = this.cartList
    // 		.reduce((total, shop) => {
    // 			let num1 = shop.goods.map((row) =>
    // 				row.selectedSpecificationGroups.filter((item) =>
    // 					item.check
    // 				).reduce((shopTotal, item) => {
    // 					var shopTotal = new Decimal(shopTotal)
    // 					let currentUnitPrice = new Decimal(item.currentUnitPrice)
    // 					let amount = new Decimal(item.amount)
    // 					let num1 = (currentUnitPrice.mul(amount).toNumber())
    // 					num1 = new Decimal(num1)
    // 					return shopTotal.add(num1).toNumber()
    // 				}, 0)
    // 			).reduce((shopTotal, item) => {
    // 				return shopTotal + item
    // 			})
    // 			num1 = new Decimal(num1)
    // 			num = num.add(num1).toNumber()
    // 			num = new Decimal(num)
    // 			return num
    // 		}, 0);
    // 	// 计算保险
    // 	selectLg = new Decimal(this.contactSelectArr.length)
    // 	unitPrice = new Decimal(this.unitPrice)
    // 	unitPriceAll = (selectLg.mul(unitPrice).toNumber())
    // 	unitPriceAll = new Decimal(unitPriceAll)
    // 	num = new Decimal(num)
    // 	num = num.add(unitPriceAll).toNumber()
    // 	console.log('num----------',num)
    // 	return num
    // },
    // 观影人选择
    checkFun(index, item) {
      this.contactArr[index].check = !item.check
      if (item.check) {
        this.contactSelectArr.push(item)
      } else {
        console.log('-----', item.realname)
        this.contactSelectArr = this.contactSelectArr.filter(
          (row) => row.realname != item.realname
        )
      }
      // this.totalPrice()
    },
    toFirst(arr, index) {
      if (index != 0) {
        arr.unshift(arr.splice(index, 1)[0])
      }
    },
    // 选择主行人
    checkSet(index) {
      this.contactSelectArrIndex = index
      this.toFirst(this.contactSelectArr, index)
    },
    // 保险
    checkFun1(val, item) {
      this.TravelIndex = val
      this.unitPrice = item.unitPrice
      // this.totalPrice()
    },
    // 留言
    manClick() {
      this.$nextTick(() => {
        const paramObj = JSON.parse(JSON.stringify(this.paramObj))
        this.$refs['info'].open(paramObj)
      })
    },
    // 留言备注信息
    addText(val) {
      this.paramObj = val
    },
    pBtn(e) {
      this.paramObj.realname = e.name
    },
    // 倒计时到了
    begin() {
      uni.showToast({
        title: '时间到，已自动取消订单',
        icon: 'none',
      })
      setTimeout(() => {
        this.$bus.$emit('refresh')
        uni.navigateBack()
      }, 2000)
    },
    goPage(url) {
      uni.navigateTo({
        url: url,
      })
    },
    statusFun(refundStatus, status) {
      /*
      * status 订单状态(0:待付款 1:待使用（已付款）)
      * refundStatus 订单状态(0:待退款 1:已取消（已退款）  -1:已驳回 )
      */
      let text = ''
      let color = '#ff5000'
      if (refundStatus == 1) {
        text = '已取消'
      } else {
        if (status == 0) {
          text = '待付款'
        } else if (status == 1) {
          text = '待使用'
        } else if (status == -1) {
          text = '交易失败'
        }
      }
      return {
        text,
        color,
      }
    },
    leadToSetPeople() {
      const that = this
      uni.showModal({
        title: '当前还未设置联系人',
        content: '前往设置？',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            uni.navigateTo({
              url: '/page_wallet/peopleList',
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },
    isHavePeople() {
      let arr = []
      this.contactSelectArr.map((item) => {
        if (item.check) {
          arr.push(item.realname)
        }
      })
      return arr
    },
    // 在当前页面进行结算
    submit() {
      // 是否设置了联系人
      const selectedItems = this.cartList.flatMap((shop) =>
        shop.goods.filter((item) => item.check)
      )
      if (selectedItems.length === 0) {
        uni.showToast({
          title: '请选择商品',
          icon: 'none',
        })
        return
      }
      if (this.contactArr.length == 0) {
        this.leadToSetPeople()
        return
      }
      if (this.isHavePeople().length == 0) {
        uni.showToast({
          title: '请选择联系人',
          icon: 'none',
        })
        return
      }
      if (!this.check) {
        uni.showToast({
          title: '请阅读并同意用户须知',
          icon: 'none',
        })
        return
      }
      let goodsList = selectedItems.map((item) => {
        let array = []
        let arr = item.selectedSpecificationGroups
          .filter((row) => {
            return row.amount > 0
          })
          .map((i) => {
            return {
              specificationCondition: i.specificationCondition,
              specificationItemGroup: i.specificationItemGroup,
              amount: i.amount,
            }
          })
        array = array.concat(arr)
        return {
          goodsId: item.id,
          selectedSpecificationGroups: array,
          insuranceSpecificationName: this.TravelArr[this.TravelIndex].name,
        }
      })
      this.submitToCart(goodsList)
    },
    async submitToCart(goodsList) {
      let param = {
        realnames: this.isHavePeople(),
        description: this.paramObj.description,
        goodsList: goodsList,
      }
      uni.showLoading()
      let data = await this.$apiFun.postApi(this.$api.orderCreateApi, param)
      console.log('data---', data)
      let res = await this.$apiFun.getApi(this.$api.orderPrepayApi, {
        tradeNo: data,
      })
      // 支付api
      try {
        await this.$publicFun.payFun(res)
        uni.redirectTo({
          url: '/page_wallet/orderList?type=1',
        })
      } catch (e) {
        uni.redirectTo({
          url: '/page_wallet/orderList?type=1',
        })
      }
      uni.hideLoading()
    },
  },
}
</script>
<style>
page {
  height: 100%;
  background: #000000;
  color: white;
}
</style>
<style scoped lang="less">
.container {
  padding: 0 15rpx;
  box-sizing: border-box;
  background-color: #000000;
  min-height: 100vh;
  padding-bottom: 200rpx;
}

.arrow-icon {
  width: 10rpx;
  height: 10rpx;
  margin-left: 10rpx;
}

.order-item {}

.shipping {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 1);
}

.people {
  margin: 20rpx auto 20rpx;
  // box-sizing: border-box;
  // padding: 10rpx 30rpx 15rpx;
  // border-radius: 6rpx;
  // background: rgba(255, 255, 255, 0.1);

  /* 商家名称 */
  .people-name {
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .people-name-title {
      max-width: 400rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: bold;
    }

    .people-name-desc {
      font-size: 22rpx;
    }
  }

  .scroll-container {
    white-space: nowrap;
    /* 防止换行 */
    width: 100%;
    padding: 10rpx 0 0rpx;

    .product-list {
      display: inline-flex;
      /* 横向排列 */
    }

    .product-item {
      min-width: 100rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      margin-right: 15rpx;
      display: block;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      padding: 0 15rpx;
      border-radius: 6rpx;
      border: 2rpx solid rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .spec-text-sum {
        position: absolute;
        top: -10rpx;
        right: -5rpx;
        padding: 1rpx 8rpx;
        border-radius: 15rpx;
      }
    }

    .product-item-active {
      border-radius: 6rpx;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 1);
      border: 2rpx solid rgba(255, 255, 255, 1);
      color: #000000;
    }
  }

  .people-desc {
    margin-top: 15rpx;
    font-size: 22rpx;
    color: #3b82f6;
  }

  .addresssli {
    width: 100%;
    overflow: hidden;
    // background-color: rgba(255, 255, 255, .1);
    // border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
    padding: 30rpx 0;
    display: flex;
    align-items: center;

    .addresssli-jian {
      height: 55rpx;
      margin-right: 40rpx;
      display: flex;
      align-items: center;

      /* 选择框 */
      .checkbox {
        width: 28rpx;
        height: 28rpx;
        border: 2rpx solid #ffffff;
        border-radius: 50%;
        margin-right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22rpx;
      }

      /* 选中状态的复选框 */
      .checkbox-icon {
        font-size: 24rpx;
        color: #fff;
        background-color: #ff5000;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .addressslicon {
      .addressslicon-title {
        font-size: 30rpx;
        margin-bottom: 10rpx;
      }

      .addressslicon-desc {
        margin-bottom: 5rpx;
        font-size: 26rpx;
      }
    }
  }
}

// 出行
.Travel {
  margin: 20rpx auto 20rpx;
  box-sizing: border-box;
  padding: 10rpx 30rpx 15rpx;
  border-radius: 6rpx;
  background: rgba(255, 255, 255, 0.1);

  /* 商家名称 */
  .Travel-name {
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .Travel-name-title {
      max-width: 400rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: bold;
    }

    .Travel-name-desc {
      font-size: 22rpx;
    }
  }

  .Travel-container {
    white-space: nowrap;
    /* 防止换行 */
    width: 100%;
    padding: 10rpx 0 0rpx;

    .Travel-list {
      display: inline-flex;
      /* 横向排列 */
    }

    .Travel-item {
      background: rgba(0, 0, 0, 1);
      width: 210rpx;
      height: 600rpx;
      text-align: center;
      line-height: 60rpx;
      margin-right: 15rpx;
      display: block;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      padding: 0 15rpx;
      border-radius: 10rpx;
      border: 2rpx solid rgba(0, 0, 0, 1);
      position: relative;

      .Travel-item-img {
        width: 85rpx;
        height: 75rpx;
        margin: 30rpx auto 30rpx;
      }

      .Travel-item-name {
        font-size: 35rpx;
      }

      .Travel-item-desc {
        font-size: 25rpx;
        color: rgba(255, 255, 255, 0.7);
      }

      .Travel-item-desc1 {
        padding-top: 35rpx;
        height: 180rpx;
        margin-top: 20rpx;
        border-top: 1rpx solid rgba(255, 255, 255, 0.3);

        .Travel-item-desc1-desc {
          font-size: 25rpx;
          color: rgba(255, 255, 255, 0.7);

          .Travel-item-desc1-desc-text {
            color: #2b8b6f;
            margin-left: 5rpx;
          }

          .Travel-item-desc1-desc-text-red {
            color: red;
          }
        }
      }
    }

    .Travel-item-active {
      // border-radius: 6rpx;
      // box-sizing: border-box;
      // background: rgba(255, 255, 255, 1);
      border: 2rpx solid #0d6ddb;
      // color: #000000;
    }
  }
}

.card {
  margin: 20rpx auto;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-box {
  // padding: 0 30rpx;
  // box-sizing: border-box;
  // background: rgba(255, 255, 255, 0.1);
  min-height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
  border-radius: 10rpx;

  .card-box-l {
    white-space: nowrap;
    min-width: 150rpx;
    font-size: 26rpx;
  }

  .card-box-r {
    color: rgba(255, 255, 255, 0.7);
    font-size: 25rpx;
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 1);
  padding: 20rpx;

  .footer1-box-r {
    color: rgba(255, 255, 255, 1);
    margin: 0 25rpx 30rpx 0;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;

    .product-price {
      font-size: 20rpx;
      color: #e64340;
      font-weight: bold;
    }
  }

  .footer-btn {
    display: flex;
    justify-content: flex-end;

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90rpx;
      padding: 0 40rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      border-radius: 90rpx;
      text-align: center;

      &:after {
        border: 0;
      }

      &.secondary {
        background: #f5f5f5;
        color: #666;
      }

      &.primary {
        background: #e64340;
        color: white;
      }
    }
  }
}

.fs-28 {
  font-size: 28rpx;
}

.fs-32 {
  font-size: 32rpx;
}

.fs-40 {
  font-size: 40rpx;
}

.color-primary {
  color: #07c160;
}

.color-grey {
  color: #999;
}

.color-dark {
  color: rgba(255, 255, 255, 1);
}

.bg-primary {
  background: #07c160;
}

.flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

/* 购物车列表 */
.cart-list {
  margin: 20rpx auto 20rpx;

  /* 商家分组 */
  .cart-list-group {
    margin-bottom: 20rpx;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10rpx;

    .cart-list-title {
      padding-left: 30rpx;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 1);
      height: 80rpx;
      display: flex;
      align-items: center;

      .cart-list-title-title {
        font-size: 32rpx;
        display: flex;
        align-items: center;
        font-weight: bold;
        max-width: 400rpx;
        text-overflow: ellipsis;
        white-space: nowrap;

        .iconfont {
          font-size: 40rpx;
          margin-right: 10rpx;
        }
      }
    }

    /* 商家信息 */
    .cart-list-header {
      display: flex;
      align-items: center;
      padding: 20rpx;
    }

    /* 商家名称 */
    .cart-list-name {
      color: rgba(255, 255, 255, 1);
      font-size: 26rpx;
      margin-left: 10rpx;

      display: flex;
      align-items: center;

      .cart-list-name-title {
        font-size: 28rpx;
        max-width: 400rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: bold;
      }
    }
  }


  /* 选择框 */
  .checkbox {
    width: 40rpx;
    height: 40rpx;
    border: 2rpx solid #ccc;
    border-radius: 50%;
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 选中状态的复选框 */
  .checkbox-icon {
    font-size: 24rpx;
    color: #fff;
    background-color: #ff5000;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 商品图片 */
  .product-image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 10rpx;
    border: 1rpx solid #f7f7f7;
  }

  /* 商品信息 */
  .product-info {
    // height: 150rpx;
    flex: 1;
    margin-left: 20rpx;

    .product-info-box {
      // margin-top: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .product-title-color {
    color: rgba(255, 255, 255, 0.7);
  }

  /* 单个购物车商品项 */
  .cart-item {
    display: flex;
    align-items: center;
    // padding: 20rpx;
  }

  /* 商品标题 */
  .product-title {
    width: 100%;
    display: block;
    font-size: 30rpx;
    width: 100%;
    // width: 400rpx;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 10rpx;
  }

  .product-div {
    /* 防止换行 */
    white-space: nowrap;
    padding: 0rpx;

    width: calc(100vw - 60rpx);

    .product-div-tag {
      display: inline-block;
      font-size: 20rpx;
      color: white;
      border: 1rpx solid rgba(255, 255, 255, 0.7);
      border-radius: 6rpx;
      margin-right: 10rpx;
      padding: 5rpx 10rpx;
      white-space: nowrap;
    }
  }

  .product-info-div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    .over-list {
      width: 240rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* 数量操作 */
    .quantity-control {
      text-align: right;
      color: rgba(255, 255, 255, 1);
    }
  }

  .product-price-low {
    font-size: 20rpx;
    color: rgba(255, 255, 255, 0.7);
  }
}

.user-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.7);

  .user-notices {
    flex: 1;

    .user-notice-text {
      color: #3b82f6;
    }
  }


  /* 选择框 */
  .checkbox {
    width: 28rpx;
    height: 28rpx;
    border: 2rpx solid #ff5000;
    border-radius: 50%;
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 选中状态的复选框 */
  .checkbox-icon {
    font-size: 24rpx;
    color: #fff;
    background-color: #ff5000;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.shop-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  margin-top: 10rpx;
  border-top: 5rpx solid #000000;

  .shop-item-l {
    flex: 1;

    .shop-item-l-text {
      font-size: 26rpx;
      margin-right: 10rpx;
      // width: 550rpx;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
    }

    .shop-item-l-price {

      /* 商品价格 */
      .shop-item-l-price-price {
        font-size: 26rpx;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);

        .price-icon {
          font-size: 20rpx;
        }

        .plan-price-text {
          font-size: 25rpx;
          margin: 0 5rpx;
        }
      }
    }
  }
}
</style>